<template>
  <div class="hello">
		 
  <div class="minor-head">
		<nav>
			<ul>
				<li>
					<a href="javascript:void(0)">推荐</a>
				</li>
				<li>
					<a href="javascript:void(0)" class='active'>排行榜</a>
				</li>
				<li>
					<a href="javascript:void(0)">歌单</a>
				</li>
				<li>
					<a href="javascript:void(0)">主博电台</a>
				</li>
				<li>
					<a href="javascript:void(0)">歌手</a>
				</li>
				<li>
					<a href="javascript:void(0)">新碟上架</a>
				</li>
			</ul>
		</nav>
		<div class='home_main'>
			
	
			<div class="minor-content">
				<!-- 轮播图下面的内容-->
				<div class="minor-left">
					<!-- 左边的歌单 -->
					<v-lyric></v-lyric>
				
				</div>
				<!--歌单右边的-->
				<div class="minor-right">
					 <!--歌单左边的 -->
				</div>
			</div>
		
		</div>
		
		<v-footer></v-footer>
	
	</div>
   
   
  </div>
</template>

<script>
import Lyric from "./Lyric";
import Footer from "../homepage/Footer";


export default {
  name: 'play',
  data () {
    return {

    }
    
  },
	components:{
		'v-lyric':Lyric,
		'v-footer':Footer
	}
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.home_main{
	width: 980px;
	margin: 0 auto;
	box-shadow: 1px 0 0 1px #ccc,-1px 0px 0px #ccc;
}
.minor-left{
/*padding: 47px 30px 40px 39px;*/

}
.minor-content{
	height: 1000px;
}

</style>
